/**
 * @Author: zhiqing.wang
 * @Email: zhiqing.wang@brgroup.com
 * @Date: 2021-10-12 10:37:31
 * @LastEditors: zhiqing.wang
 * @LastEditTime: 2021-10-17 11:34:09
 * @Description: 头部注释
*/
<template>
  <!-- 多波次 -->
  <div class="node-box">
    <Icon type="cancel-questionnaire" class="icon" />
    <p> 延时节点 </p>

    <div class="child">
      <Button type="text" @click="edit">
        编辑
      </Button>
      <Button type="text" @click="del" class="m-l-1">
        删除
      </Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
/*eslint-disable */
import { Icon, Button } from '@bairong/uxd-ui'
import { defineProps } from 'vue'

const props = defineProps({
  icon: {
    type: String
    // required: true
  },
  text: {
    type: String
    // required: true
  }
})

defineExpose({
  ...props
})

const edit = () => {
  console.log(123123)
}
const del = () => {
  console.log(456456)
}

/*eslint-disable */
</script>

<style scoped lang="less">
.child {
  width: 150px;
  min-height: 100px;
  background: #fff;
  position: absolute;
  left: 60px;
  top: 0;
  display: none;
}
.node-box {
  width: 64px;
  height: 64px;
  border: 1px solid #136fff;
  border-radius: 5px;
  background: #fff;
  text-align: center;
  padding-top: 6px;
  position: relative;
  &:hover {
    background: #136fff;
    color: #fff;
    .child {
      // display: block;
      color: #000;
    }
    .icon {
      color: #fff;
    }
  }
  .icon {
    font-size: 22px;
    color: #136fff;
  }
}
</style>
